Template Engines

Motivations
- We can include PHP code in an HTML file. Can we include JavaScript code in an HTML file as well?

Project

Learning objectives
- Understand what templating is like
- Use of basic features of a templating engine, EJS

Prerequisites
- Node.js
- Express.js

EJS
- Read EJS
  - Idea?
    Tags
    Passing data (e.g., a variable of an object)?
  - Tags:
    - <% ... %> for control-flow and no output; for example,
```
<% if (...) { %>
<%- ... %>
<% } %>
```
    - <%= ... %> HTML escapted output; e.g., " -> &#34 ;
    - <%- ... %> unescaped output
  - Browser support: ejs.render(teplatestring, data)
- Trial 1: Let's try the next code with the EJS browser support.
  <div id='tr1-output'></div> <script src="ejs.js"></script>  <script> { let people = ['Skywalker', 'Vader', 'Yoda']; let html = ejs.???('??? people.join(", "); %>', {people}); // the 2nd argument is an object. $('#tr1-output').html(html); } </script>
- Trial 2: Let's try the next code with the EJS browser support. Control structures in EJS code?
  <div id='tr2-output'></div> <script src="ejs.js"></script> <script> { let people = ['Skywalker', 'Vader', 'Yoda']; let html = ejs.???(` <ul> ??? // control-flow data.forEach((item)=>{ // try with data2 as well %> <li> ????  </li> <% }); ??? </ul> `, {data:people, data2:['Wonderful', "Great"]}); $('#tr2-output').html(html); } </script>
- Trial 3: Let's try the next code with the EJS browser support. An EJS template file/string can be obtained from a server or local file system.
  <div id='tr3-output'></div> <script src="ejs.js"></script> <script> { let people = ['Skywalker', 'Vader', 'Yoda']; $.get("test_ejs.ejs", (str) => { let html = ejs.???(???, {data:people}); $('#tr3-output').html(html); }); /* It can be done in the Node.js environment as follows. const ejs = require("ejs"); ejs.renderFile("test_ejs.ejs", {data:people}, function(err, html) { if (err) console.log(err); else console.log(html); }); */ /* An example of test_ejs.ejs <ul> <% data.forEach((item)=>{ %> <li> <%=item%> </li> <% }); %> </ul> */ } </script>

EJS with Express
- Read Using EJS with Express
  - ./views - a default directory for template files; file extension: .ejs
  - app.set('view engine', 'enginename')
  - res.render('templatefile', data)
- Trial 4: Let's try the next code that uses EJS with Express.
  // In weather.ejs in the directory, views, <html> <body> <h1>What a ??? expression %> <%= target ???!</h1> </body> </html> // In test_weather.js, let express = require('express'); let app = express(); app.listen(yourportnumber); app.???(????, 'ejs'); // <-- app.get('/', (req, res) => { res.???(???, {expression: 'wonderful', target: 'day'}); });
  Connect to cs.tru.ca with your account, save the above code in views/weather.ejs and test_weather.js, and complete and run it.
  (Note that if the directory, views, does not exist, you need to create it.)
  (Note that you might need to install ejs and express.)
  How to test it?

References for further information

5.3 Template Engines